<template>
	<view>
		<!-- 导航区域 -->
		<view class="header-nav">
			<scroll-view scroll-x="true" :scroll-left="tabLeft" style="display: flex;white-space: nowrap;">
				<view class="nav-item" :class="navOn==index?'nav-on':''" v-for="(item,index) in navBar" :key="index"
					:style='"width:"+isWidth+"px"' @click="navOn=index">{{item.name}}({{item.num}})</view>
			</scroll-view>
		</view>
		<shop-area v-if="navOn==0" :list="listData" :isTozx="false"></shop-area>
		<goldItem v-if="navOn==1" :list="listData"></goldItem>
		<merService v-if="navOn==2" :list="listData" :toZx="false"></merService>
		<supplyChain v-if="navOn==3" :list="listData"></supplyChain>
		<recruit v-if="navOn==4" :list="listData" :openPadding="true"></recruit>
		<project-list v-if="navOn==5" :list="listData" />

		<view class='loadingicon acea-row row-center row-middle'>
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	// 
	import shopArea from '@/components/listItems/shopArea.vue'
	import goldItem from '@/components/listItems/goldItem.vue'
	import merService from '@/components/listItems/merService.vue'
	import recruit from '@/components/listItems/recruit.vue'
	import supplyChain from '../components/supplyChain.vue'
	import projectList from '@/components/listItems/projectList.vue'
	import {
		getCollectList,
		getCollectCount
	} from '@/api/user.js'
	export default {
		components: {
			shopArea,
			goldItem,
			merService,
			recruit,
			supplyChain,
			projectList
		},
		data() {
			return {
				navOn: 0,
				navBar: [{
						name: '商铺',
						num: 0,
						type: 1,
						f: 'shop'
					}, {
						name: '二手闲置',
						num: 0,
						type: 2,
						f: 'secondHand'
					}, {
						name: '商家服务',
						num: 0,
						type: 3,
						f: 'merchantService'
					}, {
						name: '供应链',
						num: 0,
						type: 4,
						f: 'supply'
					}, {
						name: '招工',
						num: 0,
						type: 5,
						f: 'recruit'
					},
					{
						name: '项目',
						num: 0,
						type: 9,
						f: 'project'
					},
				],
				listData: [],
				loading: false,
				isWidth: 0, //每个导航栏占位
				loadTitle: '',
				limit: 8,
				page: 1,
				tabLeft: 0
			};
		},
		created() {
			let that = this;
			// this.getOnListData();
			// this.getCount();
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})
		},
		watch: {
			navOn: {
				handler(newVal){
					let index = newVal
					if (this.navBar.length >= 5) {
						var tempIndex = index - 2;
						tempIndex = tempIndex <= 0 ? 0 : tempIndex;
						this.$nextTick(() => {
							this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
							console.log(this.tabLeft)
						})
					}
					this.page = 1;
					this.getOnListData();
					this.getCount();
				},
				immediate: false
			}
		},
		onLoad(options) {
			if (!options.type){
				this.getOnListData();
				this.getCount();
				return
			};
			this.navOn = Number(options.type)
		},
		methods: {
			getOnListData() {
				this.loading = false;
				getCollectList({
					type: this.navBar[this.navOn].type,
					limit: this.limit,
					page: this.page
				}).then(res => {
					this.loading = true;
					if (this.page == 1) {

						this.listData = res.data.list.map(item => item.managementResponse ? item.managementResponse : {});
						if (this.listData.length <= 0) {
							this.loadTitle = '暂无数据'
						}
					} else {
						this.listData = this.listData.concat(res.data.list.map(item => item.managementResponse));
						if (res.data.list.length <= 0) {
							this.loadTitle = '已加载所有'
						}
					}
				})
			},
			getCount() {
				getCollectCount().then(res => {
					if (res.code == 200) {
						let d = res.data;
						this.navBar.forEach(item => {
							item.num = d[item.f] ? d[item.f] : 0
						})
					}

				})
			}
		},
		onReachBottom() {
			this.page++;
			this.getOnListData()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getOnListData()
		}
	}
</script>

<style lang="scss">
	.header-nav {
		width: 100%;
		background: #ffffff;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
		margin-bottom: 20rpx;

		.nav-item {
			display: inline-block;
			white-space: nowrap;
			padding: 12rpx 0;
			margin-right: 72rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 48rpx;
			color: rgba(0, 0, 0, 0.6);
			text-align: center;
		}

		.nav-on {
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 48rpx;
			color: rgba(238, 33, 45, 1);
			border-bottom: 1px solid rgba(238, 33, 45, 1);
		}
	}
</style>